<template>
	<view class="top_button">
		<text class="cancel">取消</text>
		<view class="btn" :style="btnActive" @tap="tapBtn">
			<text class="text">完成</text>
		</view>
	</view>
</template>

<script setup>
	import { computed } from 'vue';
	const props = defineProps({
		isActive:{
			type: Boolean,
			default: false
		}
	})
	
	const emit = defineEmits(['tapBtn'])
	
	const btnActive = computed(() => { // 完成按钮激活与未激活的样式
		if(props.isActive){
			return `background-color: #f7931e;`
		}else{
			return `background-color: #eee;`
		}
	})
	
	const tapBtn = () => { // 点击完成按钮
		if(props.isActive){
			emit('tapBtn')
		}
	}
	
</script>

<style lang="less" scoped>
	.top_button{
		height: 60rpx;
		padding: 0 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		.cancel{
			font-size: 30rpx;
		}
		.btn{
			padding: 5rpx 8rpx;
			border-radius: 10rpx;
			border: 1rpx solid #f5f5f5;
			background-color: #eee;
			.text{
				font-size: 30rpx;
			}
		}
	}
</style>